import React, { useEffect, useState } from 'react';
import { Card, Form } from 'react-bootstrap';

const ServerBasicConfig = ({ config, setConfig }) => {
  // 组件内部默认配置
  const defaultConfig = {
    hostname: 'DayZ Server',
    description: '欢迎来到生存世界！\n\n服务器特色：\n✅ PVE/PVP混合模式\n🔫 自定义武器刷新\n🏠 建造系统\n🗺️ 动态事件\n\n加入我们一起探索末日世界！',
    maxPlayers: 60,
    password: '',
    passwordAdmin: '',
    enableWhitelist: 0,
    disableBanlist: false,
    disablePrioritylist: false,
    serverPort: 2302,
    steamQueryPort: 2303,
    clientPort: 2304,
    rconPassword: ''
  };

  // 组件内部状态，用于表单输入临时存储
  const [localConfig, setLocalConfig] = useState(defaultConfig);

  // 当外部config变化时，更新内部localConfig
  useEffect(() => {
    const mergedConfig = {
      ...defaultConfig,
      ...config
    };
    setLocalConfig(mergedConfig);
  }, [config]);

  // 处理配置变更，同时更新本地状态和全局配置
  const handleConfigChange = (key, value) => {
    setLocalConfig(prev => ({ ...prev, [key]: value }));
    setConfig(prev => ({ ...prev, [key]: value }));
  };

  return (
    <Card className="h-100 border-3 shadow-medium" style={{backgroundColor: 'rgba(26, 26, 26, 0.6)', backdropFilter: 'blur(15px)', borderColor: '#d32f2f', boxShadow: '0 0 20px rgba(211, 47, 47, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(211, 47, 47, 0.2)'}}>
      <Card.Header style={{backgroundColor: 'rgba(40, 40, 40, 0.7)', backdropFilter: 'blur(15px)'}}>
        <h3 style={{color: 'var(--primary-color)'}}>服务器基础配置</h3>
      </Card.Header>
      <Card.Body style={{color: '#ffffff', maxHeight: '70vh', overflowY: 'auto'}}>
        {/* 服务器基本信息 */}
        <h4 style={{color: '#ff6b6b', marginBottom: '15px', borderBottom: '1px solid rgba(255,255,255,0.1)', paddingBottom: '5px'}}>服务器基本信息</h4>
        <div className="row mb-4">
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Label>服务器名称</Form.Label>
              <Form.Control 
                type="text" 
                value={localConfig.hostname} 
                onChange={(e) => handleConfigChange('hostname', e.target.value)} 
                className="glass-input"
                style={{backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff'}}
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                显示在服务器浏览器中的名称
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Label>最大玩家数量</Form.Label>
              <Form.Control 
                type="number" 
                min="1" 
                max="100" 
                value={localConfig.maxPlayers} 
                onChange={(e) => handleConfigChange('maxPlayers', parseInt(e.target.value) || 60)} 
                className="glass-input"
                style={{backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff'}}
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                服务器支持的最大玩家数量
              </Form.Text>
            </Form.Group>
          </div>
        </div>

        {/* 服务器描述 */}
        <Form.Group className="mb-6">
          <Form.Label>服务器描述</Form.Label>
          <Form.Control 
            as="textarea" 
            rows={3} 
            value={localConfig.description} 
            onChange={(e) => handleConfigChange('description', e.target.value)} 
            className="glass-input"
            style={{backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff'}}
            placeholder="欢迎来到我们的服务器！\n这里是一个PVE环境\n✅ 友好社区 🔫 自定义武器"
          />
          <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
            显示在服务器详情中的描述信息 | 符号格式：使用\n换行，✅🔫等Emoji可用
          </Form.Text>
        </Form.Group>

        {/* 访问控制设置 */}
        <h4 style={{color: '#ff6b6b', marginBottom: '15px', borderBottom: '1px solid rgba(255,255,255,0.1)', paddingBottom: '5px'}}>访问控制</h4>
        <div className="row mb-4">
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Label>服务器密码</Form.Label>
              <Form.Control 
                type="password" 
                value={localConfig.password} 
                onChange={(e) => handleConfigChange('password', e.target.value)} 
                className="glass-input"
                style={{backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff'}}
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                留空表示无密码
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Label>管理员密码</Form.Label>
              <Form.Control 
                type="password" 
                value={localConfig.passwordAdmin} 
                onChange={(e) => handleConfigChange('passwordAdmin', e.target.value)} 
                className="glass-input"
                style={{backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff'}}
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                用于管理员访问的密码
              </Form.Text>
            </Form.Group>
          </div>
        </div>

        {/* 访问列表设置 */}
        <div className="row mb-6">
          <div className="col-md-4">
            <Form.Group className="mb-3">
              <Form.Check 
                type="switch" 
                id="enableWhitelist" 
                label="白名单" 
                checked={localConfig.enableWhitelist === 1} 
                onChange={() => handleConfigChange('enableWhitelist', localConfig.enableWhitelist === 1 ? 0 : 1)} 
                className="form-switch-glow"
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                启用后，只有白名单用户可以连接服务器
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-4">
            <Form.Group className="mb-3">
              <Form.Check 
                type="switch" 
                id="disableBanlist" 
                label="禁用黑名单" 
                checked={localConfig.disableBanlist} 
                onChange={() => handleConfigChange('disableBanlist', !localConfig.disableBanlist)} 
                className="form-switch-glow"
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                启用后将禁用服务器的黑名单功能
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-4">
            <Form.Group className="mb-3">
              <Form.Check 
                type="switch" 
                id="disablePrioritylist" 
                label="禁用优先级列表" 
                checked={localConfig.disablePrioritylist} 
                onChange={() => handleConfigChange('disablePrioritylist', !localConfig.disablePrioritylist)} 
                className="form-switch-glow"
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                启用后将禁用服务器的优先级列表功能
              </Form.Text>
            </Form.Group>
          </div>
        </div>

        {/* 网络设置 */}
        <h4 style={{color: '#ff6b6b', marginBottom: '15px', borderBottom: '1px solid rgba(255,255,255,0.1)', paddingBottom: '5px'}}>网络设置</h4>
        <div className="row mb-4">
          <div className="col-md-3">
            <Form.Group className="mb-3">
              <Form.Label>服务器端口</Form.Label>
              <Form.Control 
                type="number" 
                min="1024" 
                max="65535" 
                value={localConfig.serverPort} 
                onChange={(e) => handleConfigChange('serverPort', parseInt(e.target.value) || 2302)} 
                className="glass-input"
                style={{backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff'}}
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                服务器通信端口
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-3">
            <Form.Group className="mb-3">
              <Form.Label>Steam查询端口</Form.Label>
              <Form.Control 
                type="number" 
                min="1024" 
                max="65535" 
                value={localConfig.steamQueryPort} 
                onChange={(e) => handleConfigChange('steamQueryPort', parseInt(e.target.value) || 2303)} 
                className="glass-input"
                style={{backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff'}}
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                通常为服务器端口+1
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-3">
            <Form.Group className="mb-3">
              <Form.Label>客户端端口</Form.Label>
              <Form.Control 
                type="number" 
                min="1024" 
                max="65535" 
                value={localConfig.clientPort} 
                onChange={(e) => handleConfigChange('clientPort', parseInt(e.target.value) || 2304)} 
                className="glass-input"
                style={{backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff'}}
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                通常为服务器端口+2
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-3">
            <Form.Group className="mb-3">
              <Form.Label>RCON密码</Form.Label>
              <Form.Control 
                type="password" 
                value={localConfig.rconPassword} 
                onChange={(e) => handleConfigChange('rconPassword', e.target.value)} 
                className="glass-input"
                style={{backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff'}}
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                远程控制台密码
              </Form.Text>
            </Form.Group>
          </div>
        </div>
      </Card.Body>
    </Card>
  );
};

export default ServerBasicConfig;